<script lang="ts" setup>
import type { ProductApi } from '#/models/product/product';

import { computed, nextTick, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { $t } from '#/locales';
import { ProductModel } from '#/models/product/product';

import { useSchema, useTabbedSchema } from '../data';

const emit = defineEmits(['success']);

const confirmLoading = ref(false);

const formModel = new ProductModel();

const formData = ref<Partial<ProductApi.Product>>();
const activeTabKey = ref('basic'); // 当前选中的选项卡key

// 获取弹窗标题
const getTitle = computed(() => {
  return formData.value?.product_id
    ? $t('ui.actionTitle.edit', [$t('product.product.title')])
    : $t('ui.actionTitle.create', [$t('product.product.title')]);
});

// 获取表单配置和选项卡配置
const schema = useSchema();
const tabbedSchema = useTabbedSchema();

// 过滤schema，只显示当前tab下的字段
const filteredSchema = computed(() => {
  const currentTab = tabbedSchema.find(
    (item) => item.key === activeTabKey.value,
  );
  if (!currentTab) return [];

  return schema.filter((field) => {
    // 确保所有需要显示的字段都能被正确包含
    return currentTab.fields.includes(field.fieldName);
  });
});

// 初始化表单，设置正确的布局和初始配置
const [Form, formApi] = useVbenForm({
  layout: 'horizontal',
  showDefaultActions: false,
});

/**
 * 处理选项卡切换事件
 * @param key 选项卡key
 */
const handleTabChange = async (key: string) => {
  // 先保存当前表单数据到formData对象中，确保所有数据都被保存
  const currentValues = formApi.getValues();

  // 更新选中的选项卡
  activeTabKey.value = key;

  // 等待DOM更新后，重新设置所有表单数据
  await nextTick();

  // 使用完整的数据对象重新设置表单值
  if (formData.value) {
    // 合并当前表单数据和原始数据，确保所有字段都被正确设置
    const mergedValues = { ...formData.value, ...currentValues };
    formApi.setValues(mergedValues);
  } else {
    // 如果没有原始数据，直接使用当前表单数据
    formApi.setValues(currentValues);
  }
};

/**
 * 重置表单
 */
function resetForm() {
  formApi.resetForm();
  if (formData.value) {
    formApi.setValues(formData.value);
  }
}

// 创建弹窗实例
const [Modal, modalApi] = useVbenModal({
  /**
   * 表单提交处理
   */
  async onConfirm() {
    // 验证表单
    const { valid } = await formApi.validate();
    if (valid) {
      modalApi.lock(); // 锁定弹窗，防止重复提交
      const data = await formApi.getValues(); // 获取表单数据

      try {
        // 确保unit_rate对象存在且有默认值
        if (!data.unit_rate) {
          data.unit_rate = {};
        }

        // 设置unit_rate对象中各属性的默认值（如果不存在）
        data.unit_rate.pr_wh = data.unit_rate_pr_wh || 1.0;
        data.unit_rate.wh_use = data.unit_rate_wh_use || 1.0;
        data.unit_rate.pr_use = data.unit_rate_pr_use || 1.0;

        // 如果表单中仍然有独立的转换率字段，则删除它们以避免提交
        if ('unit_rate_pr_wh' in data) delete data.unit_rate_pr_wh;
        if ('unit_rate_wh_use' in data) delete data.unit_rate_wh_use;
        if ('unit_rate_pr_use' in data) delete data.unit_rate_pr_use;

        // 确保status字段有有效值
        if (!data.status || data.status === '') {
          data.status = 'active'; // 设置默认值为激活状态
        }

        // 为财务信息相关字段设置默认值，避免验证错误
        // 确保barcode字段始终存在且为字符串类型
        data.barcode = data.barcode || '';

        if (data.income_account_id === undefined) {
          data.income_account_id = 0; // 设置默认值为0
        }

        if (data.cogs_account_id === undefined) {
          data.cogs_account_id = 0; // 设置默认值为0
        }

        if (data.asset_account_id === undefined) {
          data.asset_account_id = 0; // 设置默认值为0
        }

        // 根据是否有product_id决定是更新还是创建
        try {
          await (formData.value?.product_id
            ? formModel.update(formData.value.product_id, data)
            : formModel.create(data));
          await modalApi.close();
          emit('success');
        } catch (error) {
          console.error('提交表单时出错:', error);

          // 解析错误信息并显示给用户
          if (error && typeof error === 'object') {
            // 检查是否是验证错误
            let errorMessage = '提交失败：\n';

            // 处理不同格式的错误响应
            if ((error as any)?.response?.data) {
              const errorData = (error as any).response?.data;

              // 检查是否是JSON格式的错误
              if (typeof errorData === 'string') {
                try {
                  const parsedError = JSON.parse(errorData);
                  if (parsedError.status) {
                    errorMessage += `货品状态：${Array.isArray(parsedError.status) ? parsedError.status.join('，') : parsedError.status}\n`;
                  } else {
                    errorMessage += errorData;
                  }
                } catch (e) {
                  // 如果不是JSON格式，直接显示错误信息
                  errorMessage += errorData;
                }
              } else if (
                'status' in errorData ||
                Object.keys(errorData).length > 0
              ) {
                // 处理对象格式的错误
                for (const [field, messages] of Object.entries(errorData)) {
                  const fieldNames: Record<string, string> = {
                    status: '货品状态',
                    unit_rate: '单位转换率',
                    sku: 'SKU',
                    name: '货品名称',
                  };
                  const fieldName = fieldNames[field] || field;
                  errorMessage += `${fieldName}：${Array.isArray(messages) ? messages.join('，') : messages}\n`;
                }
              } else {
                errorMessage += '未知错误';
              }
            } else if (
              'status' in error ||
              'unit_rate' in error ||
              Object.keys(error).length > 0
            ) {
              // 原始错误处理逻辑
              for (const [field, messages] of Object.entries(error)) {
                const fieldNames: Record<string, string> = {
                  status: '货品状态',
                  unit_rate: '单位转换率',
                  sku: 'SKU',
                  name: '货品名称',
                };
                const fieldName = fieldNames[field] || field;
                errorMessage += `${fieldName}：${Array.isArray(messages) ? messages.join('，') : messages}\n`;
              }
            } else {
              errorMessage = '提交表单时出现错误，请稍后重试';
            }
            message.error(errorMessage);
          } else {
            message.error('提交表单时出现错误，请稍后重试');
          }
        }
      } finally {
        modalApi.lock(false);
      }
    }
  },
  /**
   * 弹窗打开/关闭时的处理
   * @param isOpen 是否打开
   */
  onOpenChange(isOpen) {
    // 弹窗打开时，设置表单数据
    if (isOpen) {
      const data = modalApi.getData<ProductApi.Product>(); // 获取弹窗数据
      if (data) {
        // 更新formData
        formData.value = data;

        // 创建表单值对象，包含必要的字段
        const formValues = { ...data };

        // 确保unit_rate对象存在且设置默认值
        if (!formValues.unit_rate) {
          formValues.unit_rate = {
            pr_wh: 1.0,
            wh_use: 1.0,
            pr_use: 1.0,
          };
        }

        // 为了保持前端表单兼容性，仍然设置独立字段的值
        // 但实际保存和提交时只使用unit_rate对象
        const formValuesWithRates = formValues as any;
        if (formValues.unit_rate) {
          formValuesWithRates.unit_rate_pr_wh =
            formValues.unit_rate.pr_wh || 1.0;
          formValuesWithRates.unit_rate_wh_use =
            formValues.unit_rate.wh_use || 1.0;
          formValuesWithRates.unit_rate_pr_use =
            formValues.unit_rate.pr_use || 1.0;
        } else {
          // 确保unit_rate对象存在
          formValuesWithRates.unit_rate = {
            pr_wh: 1.0,
            wh_use: 1.0,
            pr_use: 1.0,
          };
          formValuesWithRates.unit_rate_pr_wh = 1.0;
          formValuesWithRates.unit_rate_wh_use = 1.0;
          formValuesWithRates.unit_rate_pr_use = 1.0;
        }

        // 重置表单并设置数据
        formApi.resetForm();
        nextTick(() => {
          formApi.setValues(formValuesWithRates);
        });
      } else {
        // 新增模式时重置并设置默认值
        formData.value = undefined;

        // 重置表单并设置默认值
        formApi.resetForm();
        nextTick(() => {
          const defaultValues = {
            status: 'active', // 默认设置为激活状态

            // 为了前端表单兼容性，设置独立的转换率字段
            unit_rate_pr_wh: 1.0,
            unit_rate_wh_use: 1.0,
            unit_rate_pr_use: 1.0,

            // 同时设置unit_rate对象，确保与后端数据结构一致
            unit_rate: {
              pr_wh: 1.0,
              wh_use: 1.0,
              pr_use: 1.0,
            },
          };

          formApi.setValues(defaultValues as any);
        });
      }
    }
  },
});
</script>

<template>
  <Modal :title="getTitle" :confirm-loading="confirmLoading" class="w-[800px]">
    <div class="form-wrapper">
      <!-- 使用普通的tab导航 -->
      <div class="tab-navigation">
        <div
          v-for="item in tabbedSchema"
          :key="item.key"
          class="tab-item"
          :class="[{ active: activeTabKey === item.key }]"
          @click="handleTabChange(item.key)"
        >
          {{ item.tab }}
        </div>
      </div>

      <!-- 使用单个表单渲染所有字段，但根据当前选中的tab条件显示 -->
      <Form :schema="filteredSchema" style="margin-top: 36px">
        <template #prepend-footer>
          <div class="flex-auto">
            <Button type="primary" danger @click="resetForm">
              {{ $t('common.reset') }}
            </Button>
          </div>
        </template>
      </Form>
    </div>
  </Modal>
</template>

<style lang="css" scoped>
/* 表单包装器 - 全局布局控制 */
.form-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Modal整体布局优化 */
:deep(.ant-modal) {
  width: 1200px !important;
  max-width: 90vw !important;
}

/* 调整Modal内容区域高度，确保有足够的显示空间 */
:deep(.ant-modal-content) {
  max-height: 80vh !important;
}

/* 调整FormItem的间距和布局 */
:deep(.ant-form-item) {
  margin-bottom: 16px !important;
}

/* 自定义tab导航样式：固定tab导航，不随内容滚动 */
.tab-navigation {
  position: fixed;
  top: 50.5px;
  z-index: 10;
  display: flex;
  overflow-x: auto;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  padding: 8px 16px;
  white-space: nowrap;
  cursor: pointer;
}

.tab-item.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

/* 表单内容区域 - 允许滚动 */
:deep(.ant-form) {
  /* 调整最大高度，确保在tab下方有足够空间 */
  max-height: calc(80vh - 180px);
  overflow-y: auto;
}
</style>
